import Vue from 'vue'
import VueRouter from 'vue-router'

import register from "../pages/register/register.vue"
import login from "../pages/login/login.vue"
import index from "../pages/index/index.vue"
import list from "../pages/list/list.vue"
import detail from "../pages/detail/detail.vue"
import search from "../pages/search/search.vue"

import home from "../pages/home/home.vue"
import cate from "../pages/cate/cate.vue"
import shop from "../pages/shop/shop.vue"
import mine from "../pages/mine/mine.vue"
import test from "../pages/test/test.vue"
Vue.use(VueRouter)



const routes = [
  {
    path: "/index",
    component: index,
    children: [
      { path: "home", component: home },
      { path: "cate", component: cate },
      { path: "shop", component: shop }, 
      { path: "mine", component: mine },
    ]
  },
  {
    path:"/register",
    component:register,//component 走的是默认视图
    // components:{
    //   default:register,
    //   second:test
    // },
    meta: {
      title: "注册",
      back:true
    }
  },
  {
    path:"/login",
    components:{
      default:login,
      // second:test,
      second:()=>import("../pages/test/test.vue")
    },
    // component:login,
  //走的是name=second 的路由视图
     //元信息
     meta: {
      title: "登录",
      register:true
    }
  },
  {
    path:"/index",
    component:index
  },
  {
    path:"/list",
    component:list,
    name:"列表",
    meta:{
      title:"商品列表",
      back:true
    }
    
  },
  {
    path:"/detail/:id",
    name:"详情",
    component:detail,
    component:()=>import("../pages/detail/detail.vue"),
    meta:{
      title:"商品详情",
      back:true
    },
    /*
 beforeRouteUpdate:组件路由信息发生了改变的时候触发
   1.详情1跳转详情2，$route的数据变了，是不会二次触发mounted，也不会触发updated,会触发beforeRouteUpdate；
   2.在beforeRouteUpdate中，取详情2的参数，需要使用的to. from和this.$route都是详情1 的数据。
 */
    beforeRouteUpdate(to, from, next) {
      console.group("组件路由信息更新之前:beforeRouteEnter");
      console.log("to:", to);
      console.log("from:", from);
      console.log(this.$route);
      console.groupEnd();
      console.log("发请求，请求的id：" + to.params.id)
      next();
    },
    /* 组件进来之前：
    1.beforeRouteEnter比beforeCreate还要早，在此处是无法使用this
    2.如果想要在beforeRouteEnter中使用this.$route,可以借助to from.
  */
    beforeRouteEnter(to, from, next) {
      console.group("组件进来之前:beforeRouteEnter");
      console.log(this);
      console.groupEnd();
      if (from.path === "/index/home" || to.params.id == 2) {
        next("/index/mine");
      } else {
        next();
      }
    },
    //路由独享守卫
    beforeEnter(to, from, next) {
      console.group("路由独享守卫")
      console.groupEnd()
      let type = localStorage.getItem("type");
      if (type === '打野') {
        next()
      } else {
        next("/index/mine")
      }
    }
  },

  {
    path: "/search",
    //别名
    alias: "/s",
    name: "搜索",//命名路由
    component: search,
    meta: {
      title: "搜索",
      back: true
    }
  },
  {
    path: "*",
    redirect: "/login"
  },

  {
    path: "home",
    component: () => import("../pages/home/home.vue"),
    meta: {
      title: "首页"
    }
  },
  {
    path: "cate",
    component: () => Promise.resolve(import("../pages/cate/cate.vue")),
    meta: {
      title: "分类"
    }
  }
]

const router = new VueRouter({
  //路由模式：hash(默认)[localhost:8080/#/login]  history-[localhost:8080/login]
  // mode:"history",
  mode:"hash",
  // 路由规则
  routes,
    // 滚动行为
  // 希望每进入一个路由，如果之前没有访问过，从(0,0)开始显示；
  // 如果之前访问过，就要从上一次离开的额位置访问
  /**
   * 
   * @param {*} to 前往新的 的路由信息 $route
   * @param {*} from 从哪里来的路由信息 $route
   * @param {*} savePosition 之前没有访问过这个路由，就是null;如果之前访问过，那么他就是之前离开的时候的坐标 {x:0,y:166}
   * return   返回的是一进来的时候访问的坐标位置
   */
   scrollBehavior(to, from, savePosition) {
    return savePosition ? savePosition : { x: 0, y: 0 }
  }
})
// 全局路由守卫
/**全局前置守卫：进入每一个路由之前
 * 
 * @param {*} to 前往新的 的路由信息 $route
 * @param {*} from 从哪里来的路由信息 $route
 * @param {*} next 是否允许进入。 允许就调用next(),不调用，就不会进入路由
 
 */
 router.beforeEach((to, from, next) => {
  console.group("进入每一个路由之前 beforeEach")
  console.groupEnd()
  if(to.path=='/login'||to.path=='/register'){
    next()
    return;
  }
  let isLogin=localStorage.getItem("isLogin");// null '1'
  if(isLogin){
    next()
  }else{
    next("/login")
  }
 
})

export default router
